JAVA -GUI 02. 排版管理員

Posted on | Edited on | In

排版管理的類別

GUI 程式有數個部份需要顧及，分別是視窗用的小工具 (widget) 、排版 (layout) 與事件 (event)
小工具就是各種視窗元件，這些都是物件 (object) 。實際上， Java 的 GUI 排版與事件也是由物件來處理，計有以下的排版管理員

英文 中文
BorderLayout 區域式版面配置
FlowLayout 流動式版面配置
CardLayout 卡片式版面配置
GridLayout 格子式版面配置
GridBagLayout 帶狀式版面配置
BoxLayout 盒子式版面配置

BorderLayout

BorderLayout 把視窗分為東、南、西、北、中心五個方位。北和南的組件可以在水平方向上拉伸；而東和西的組件可以在垂直方向上拉伸；中心的組件可同時在水平和垂直方向上同時拉伸，從而填充所有剩餘空間。在使用BorderLayout的時候，如果容器的大小發生變化，其變化規律為:組件的相對位置不變，大小發生變化。例如容器變高了，則North、South 區域不變，West、Center、East區域變高；如果容器變寬了，West、East區域不變，North、Center、South區域變寬。不一定所有的區域都有組件，如果四周區域（West、East、North、South區域）沒有組件，則由Center區域去補充，但是如果Center區域沒有組件，則保持空白。BorderLayout是RootPaneContainer(JInternalFrame、JDialog、JFrame、JWindow)的默認佈局管理器。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1  import java.awt.* ;
2  　　　　public  class buttonDir{
3  　　　　　public  static  void main(String args[]){
4  　　　　　　Frame f = new Frame("BorderLayout" );
5  　　　　　　f.setLayout( new BorderLayout());
6  　　　　　　f .add("North", new Button("North" );
7  　　　　　　// 第一個參數表示把按鈕添加到容器的North區域
8  　　　　　　f.add("South", new Button("South" );
9  　　　　　　/ / 第一個參數表示把按鈕添加到容器的South區域
10 　　　　　　f.add("East", new Button("East" );
11  　　　　　　// 第一個參數表示把按鈕添加到容器的East區域
12  　　　　　　f.add("West", new Button("West" );
13  　　　　　　// 第一個參數表示把按鈕添加到容器的West區域
14  　　　　　　f.add("Center", new Button("Center" );
15  　　　　　　// 第一個參數表示把按鈕添加到容器的Center區域
16  　　　　　　f .setSize(200,200 );
17  　　　　　　f.setVisible( true );
18  　　　　　}
19  　　　　}

FlowLayout

該佈局稱為流式佈局管理器，是從左到右，中間放置，一行放不下就換到另外一行。一行能放置多少組件取決於窗口的寬度。默認組件是居中對齊，可以通過FlowLayout(intalign)函數來指定對齊方式，默認情況下是居中（FlowLayout.CENTER）。FlowLayout 為小應用程序(Applet)和麵板(Panel)的默認佈局管理器。其構造函數示例為:

1
2
3
FlowLayout() //生成一個默認的流式佈局，組件在容器里居中，每個組件之間留下5個像素的距離。
FlowLayout(int alinment) //可以設定每行組件的對齊方式。
FlowLayout(int alignment , int horz , int vert) //設定對齊方式並設定組件水平和垂直的距離。

當容器的大小發生變化時，用FlowLayout管理的組件會發生變化。其變化規律是:組件的大小不變，但是相對位置會發生變化。

CardLayout

這種佈局管理器能夠幫助用戶處理兩個以至更多的成員共享同一顯示空間，它把容器分成許多層，每層的顯示空間佔據整個容器大小，但是每層只允許放置一個組件，當然每層都可以利用Panel來實現複雜的用戶界面。CardLayout就像一副疊得整整齊齊的撲克牌一樣，有54張牌，但是你只能看見最上面的一張牌，一張牌就相當於佈局管理器中的一層。所有的組件像卡片一樣疊在一起，每時每刻都只能顯示其中一張卡片。CardLayout常用到切換界面。例如，點擊App的Menu之後或者某個Button之後，主界面會切換到另外一個界面，這個時候就需要CardLayout。其實現過程如下:
首先，定義面板，為個個面板設置不同的佈局，並根據需要在每個面板中放置組件:

1
2
panelOne.setLayout(new FlowLayout);
panelTwo.setLayout(new GridLayout(2,1));

再設置主面板:

1
2
CardLayout card = new CardLayout();
panelMain.setLayout(card);

下一步將開始準備好的面板添加到主面板:

1
2
panelMain.add("red panel",panelOne);
panelMain.add("blue panel",panelOne);

add()方法帶有兩個參數，第一個為String類型用來表示面板標題，第二個為Panel對象名稱。
完成以上步驟以後，必須給用戶提供在卡片之間進行選擇的方法。一個常用的方法是每張卡片都包含一個按鈕。通常用來控制顯示哪張面板。
actionListener被添加到按鈕。actionPerformed()方法可定義顯示哪張卡片:

1
2
3
4
5
card.next(panelMain); //下一個
card.previous(panelMain); //前一個
card.first(panelMain); //第一個
card.last(panelMain); //最後一個
card.show(panelMain,"red panel"); //特定面板

GridLayout

這種佈局是網格式的佈局，窗口改變的時候，組件的大小也會隨之改變。每個單元格的大小一樣，而且放置組件時，只能從左到右、由上到下的順序填充，用戶不能任意放置組件。如果改變大小， GridLayout將相應地改變每個網格的大小，以使各個網格盡可能地大，佔據Container容器全部的空間。
用構造函數劃分出網格的行數和列數，
new GridLayout(行數，列數)；
構造函數里的行數和列數能夠有一個為零，但是不能都為零。當容器裡增加控件時候，容器內將向0的那個方向增長。例如，如果是如下語句：
GridLayout layout= new GridLayout（0，1）;
//在增加控件時，會保持一個列的情況下，不斷把行數增長.
java.awt.GridBagConstraints 中的insets(0,0,0,0)的參數具體指的是：規定一個控件顯示區的空白區。
如果控件顯示的inset為(10,5,20,0)，那麼控件到顯示區北邊距離為10，西邊為5，南邊為20，東邊為0控件會比顯示區小。
如果inset為負，控件會超出顯示區，使容器中各個組件呈網格狀佈局，平均佔據容器的空間。當所有組件大小相同時用此佈局。其構造函數為:
GridLayout()
GridLayout(int row,int col)
GridLayout(int row,int col,int horz,int vert)
5.5、BoxLayout
BoxLayout佈局能夠允許將控件按照X軸（從左到右）或者Y軸（從上到下）方向來擺放，而且沿著主軸能夠設置不同尺寸。構造BoxLayout對象時，有兩個參數，例如：
Public BoxLayout（Container target，int axis）；
Targe參數是表示當前管理的容器，axis是指哪個軸，有兩個值：BoxLayout.X_AXIS和BoxLayout.Y_AXIS。
示例代碼如下：
複製代碼
1 JPanel jpanel= new JPanel();
2
3 Jpanel.setLayout( new BoxLayout(jpanel,BoxLayout.Y_AXIS);
4
5 TextArea testArea= new TextArea(4,20 );
6
7 JButton button= new JButton(“ this is a button”);
8
9 jpanel.add(testArea);
10
11 jpanel.add(button);
複製代碼
//容納testArea和button的容器，對他們沿Y軸（從上往下）放置，並且文本域和按鈕左對齊，也就是兩個控件的最左端在同一條線上。

1 testArea.setAlignmentX(Component.LEFT_ALIGNMENT);
2
3 button. setAlignmentX(Component.LEFT_ALIGNMENT);
// 容納testArea 和button的容器，對他們採用沿Y軸（從上往下）放置，並且文本域最左端和按鈕的最右端在同一條線上。

1 testArea.setAlignmentX(Component.LEFT_ALIGNMENT);
2
3 button. setAlignmentX(Component.RIGHT_ALIGNMENT);
setAlignmentX（left，right）只有在佈局是BoxLayout.Y_AXIS才效，而setAlignmentY（top，button）在佈局為BoxLayout.X_AXIS才效果。

組件對齊一般來說：
所有top-to-bottom BoxLayout object應該有相同的X alignment。
所有left-to-right Boxlayout應該有相同的Y alignment
setAlignmentX和setAlignmentY可以實現對齊。

FlowLayout

FlowLayout 是採流動式的編排，視窗中逐列安排視窗元素，每一列排完小工具後，就會移到下一列繼續。

例如以下程式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import java.awt.*;
import javax.swing.*;

public class GUIDemo2 {
public static void main(String[] args) {
JFrame demo = new JFrame();
demo.setSize(400, 300);
demo.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
demo.getContentPane().setLayout(new FlowLayout());

for (int i = 0; i < 27; i++) {
JButton b = new JButton("" + i);
demo.add(b);
}

demo.setVisible(true);
}
}

首先， demo 的 contentPane 物件需要呼叫 setLayout() 方法，設定所要採用的版面編排方式，如果沒有做這項設定， demo 就會採預設的 BorderLayout

1
demo.getContentPane().setLayout(new FlowLayout());

這裡，我們直接在 setLayout() 中新建 FlowLayout 物件作為參數 (parameter) 。

然後，總共在 demo 中放入 27 個按鈕 (button)

1
2
3
4
for (int i = 0; i < 27; i++) {
JButton b = new JButton("" + i);
demo.add(b);
}

編譯執行

由於這個例子只是單純的示範 FlowLayout ，因此所有小工具（視窗元件）都是直接加到視窗中，沒有保留對小工具的參考變數 (reference variable)

前面 25 個按鈕依序填滿前五列，我們可以看到最後兩個按鈕是置中對齊的，這也是 FlowLayout 預設的對齊方式。 FlowLayout 總共有三種對齊方式，分別是

英文 中文
FlowLayout.CENTER 置中對齊
FlowLayout.LEFT 向左對齊
FlowLayout.RIGHT 向右對齊

若要採向左或向右的對齊方式，在 FlowLayout 的建構子 (constructor) 中就得提供相對應的參數。

其他的 CardLayout 、 GridLayout 、 BoxLayout 的編排類別 (class) ，我們就不詳細介紹了。

至於我們 EncryptorGUI 會採用 GridBagLayout 排版，這是所有編排類別中最複雜的一種，同時也能夠進行最精巧的排版控制。

嗯，好的，接下來我們就來看看如使用

Reference: https://pydoing.blogspot.com/2011/05/java-basic-concept-of-gui.html